<#include "navi.ftl" />
<div class="contentWrap">
	<div id="itemWrapper">
		<div id="itemBox"></div>
	</div>  
</div>

<script type="text/javascript">
var item;
var page=0;

$(function(){
	$('#itemBox').scrollPagination({
			'contentPage': '${webmvc.url.base}/blank/main/data', // the url you are fetching the results
			'contentData': {page:function(){return ++page;}}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
			'scrollTarget': $(window), // who gonna scroll? in this example, the full window
			'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
			'beforeLoad': function(){ // before load function, you can display a preloader div
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
			item = new Item($('#itemBox'),$('.item'), $('.itemImage'), 95, 20);
			setTimeout(function(){item.set($('#itemWrapper').width() ) } ,50);
			window.onresize = function(){
			setTimeout(function(){item.set($('#itemWrapper').width() ) } ,50);
		}
		
		$('#loading').fadeOut();
		var i = 0;
		$(elementsLoaded).fadeInWithDelay();
		if ($('#itemBox').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
			$('#nomoreresults').fadeIn();
			$('#itemBox').stopScrollPagination();
			}
		}
	});
		
	// code for fade in element by element
	$.fn.fadeInWithDelay = function(){
		var delay = 0;
		return this.each(function(){
			$(this).delay(delay).animate({opacity:1}, 500);
			delay += 100;
		});
	};
});

var Item = function(wrapper, itemArticle, itemImg, itemWidth, padding) {  
	var wrapper = wrapper; 
	var itemArticle = itemArticle;  
	var itemImg = itemImg; 
	var itemWidth = itemWidth;  
	var padding = padding;  
	var cnt = itemArticle.length;
	var line = 0;
	wrapper.css( {'position':'relative', 'margin':'0 auto'});
	
	this.set = function(documentWidth){ 
		var totalItemWidth = itemWidth + padding;
		for(var i=0; i< itemImg.length; i++){
			item.changeWidth(itemImg[i]);
		}		
		var deps = parseInt(documentWidth/totalItemWidth);
		wrapper.css('width', deps * totalItemWidth - padding);
	
		if(line != deps){  
			this.p = new Array();  
			for(var i=0; i< deps; i++){  
				this.p[i] = { x : i * totalItemWidth, y : 0};
			}  
		}          
		for(var i=0; i< cnt; i++) {
			this.setImage(i);
		}
	
		var max = this.p[0].y;  
		for(var i=1; i< this.p.length; i++) {
			if(this.p[i].y > max){
				max = this.p[i].y;  
			}
		}
		wrapper.css("height" , max - padding );
		};
	
		this.setImage = function(n){  
		var setItemArticle = $(itemArticle[n]);
		setItemArticle.css({'position' : 'absolute' , 'width' : itemWidth});
	
		var min = this.p[0].y;
		var v = 0;  
		for(var i=1; i< this.p.length; i++){  
			if(this.p[i].y < min){  
				v = i;  
				min = this.p[i].y;  
			}  
		}  
		setItemArticle.css({'left' : this.p[v].x, 'top' : this.p[v].y});
		
		this.p[v].y += $(setItemArticle).height() + padding;  
	};
	
	this.changeWidth = function(img){
		var imgwidth = itemWidth - 1 * padding;
		var w = $(img).width()+2;
		$(img).css('width',imgwidth);
		};
	}
	
	var InnerTag = function(jData,id){
	var cnt = jData.length;
	var strHtml = [];
	for(var i=0; i<cnt; i++){
	strHtml.push('<article class="item" ><div class="itemImageDiv"><div><img class="itemImage" src="'+  jData[i].image +'" /><div class="itemDesc" >'+ jData[i].title +'</div></div></div></article>');
	}
	$("#" + id).html(strHtml.join(''));
	
	console.log(strHtml.join(''));
}
</script>
